<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
        吃得苦中苦，方为人上人。
    </div>
    <button @click="change">改变</button>
</div>

<script>
    const {createApp, ref} = Vue
    const activeColor = ref('red')
    const fontSize = ref(30)

    function change() {
        activeColor.value = 'blue'
        fontSize.value = 45
    }

    createApp({
        setup() {
            return {
                activeColor,
                fontSize,
                change
            }
        }
    }).mount('#app')
</script>

<style>

</style>
</body>
</html>